<template>
  <!-- 3.所有页面添加骨架屏效果 -->
  <van-skeleton title avatar :row="3" :loading="loading">
    <div>
      <NavBar title="购物车" />
      <!-- 21.实现购物车页面排版，处理没有商品时的状态 -->
      <div v-if="!cartList.length">
        <van-empty description="购物车空空如也" />
      </div>
      <van-card
        v-for="item in cartList"
        :key="item.id"
        :price="item.price"
        desc="描述信息"
        :title="item.title"
      >
        <template #thumb>
          <div class="checkbox-img">
            <van-checkbox v-model="item.checked"></van-checkbox>
            <img :src="item.img" alt="" />
          </div>
        </template>
        <template #tags>
          <van-tag plain type="primary">标签</van-tag>
          <van-tag plain type="primary">标签</van-tag>
        </template>
        <template #footer>
          <van-stepper v-model="value" />
        </template>
      </van-card>

      <van-submit-bar button-text="去结算" @submit="onSubmit">
        <van-checkbox v-model="allchecked">全选</van-checkbox>
      </van-submit-bar>
    </div>
  </van-skeleton>
</template>
<script setup>
import axios from "axios";
import { computed, ref, onMounted } from "vue";

const cartList = ref([]);
console.log(cartList);
axios.get("/getCart").then((res) => {
  console.log(res);
  cartList.value = res.data.list;
});

// 实现购物车全选反选功能
const allchecked = computed({
  get() {
    return cartList.value.every((item) => item.checked);
  },
  set(val) {
    cartList.value.forEach((item) => (item.checked = val));
  },
});

const loading = ref(true);
onMounted(() => {
  setInterval(() => {
    loading.value = false;
  }, 800);
});
</script>
<style scoped lang='scss'>
.checkbox-img {
  width: 110px;
  display: flex;
  img {
    width: 80px;
    height: 80px;
  }
}
:deep(.van-card__content) {
  margin-left: 20px;
}
</style>